<script setup>
	import { ref, reactive } from "vue"
	import { gotoHome } from "@/utils/common.js"
	import { onLoad } from "@dcloudio/uni-app"
	import { getNoticeInfoAPI } from "@/api/notice.js"

	// 公告详情
	const queryParams = reactive({})
	const noticeInfo = ref({})
	const getNoticeInfo = async () => {
		const { data } = await getNoticeInfoAPI(queryParams)
		noticeInfo.value = data
	}

	onLoad((options) => {
		if (!options.id) return gotoHome()
		// 修改标题
		uni.setNavigationBarTitle({ title: options.name })
		queryParams.id = options.id
		getNoticeInfo()
	})
</script>

<template>
	<view class="notice">
		<!-- 标题 -->
		<view class="title">
			<view class="tag" v-if="noticeInfo.select">
				<uni-tag text="置顶" type="error" inverted></uni-tag>
			</view>
			<view class="title-text">{{noticeInfo.title}}</view>
		</view>
		<!-- 发布人 -->
		<view class="info">
			<view class="item">{{noticeInfo.author}}</view>
			<view class="item">
				<uni-dateformat :date="noticeInfo.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<mp-html :content="noticeInfo.content" />
		</view>
		<!-- 阅读数 -->
		<view class="count">阅读：{{noticeInfo.view_count}}</view>
	</view>
</template>

<style lang="scss" scoped>
	.notice {
		padding: 30rpx;

		.title {
			font-size: 40rpx;
			color: #111;
			line-height: 1.6em;
			padding-bottom: 30rpx;
			display: flex;

			.tag {
				transform: scale(0.8);
				transform-origin: left center;
				flex-shrink: 0;
			}

			.title-text {
				margin-left: 10rpx;
			}
		}

		.info {
			display: flex;
			align-items: center;
			color: #999;
			font-size: 28rpx;

			.item {
				margin-right: 20rpx;
			}
		}

		.content {
			padding: 50rpx 0;
		}

		.count {
			color: #999;
			font-size: 28rpx;
		}
	}
</style>